* {
	margin: 0;
	padding: 0;
}
body {
	background: #000;
}
.mapboxgl-missing-css {
	display: none;
}
#map {
	height:100vh;
	width:100%;
}
#demons{
    padding: 5px;
    display:block;
    position:absolute;
    width:200px;
    height:70px;
    background-color:#000;
    color:#fff;
    top:20px;
    left:30px; 
    z-index: 2;
}
#demons div:first-child{
   width:200px;
   height:40px;
   text-align: center;
   font-size: 25px;
   font-weight: bold;
   border-bottom:1px solid #2c2c2c;
}
#demons div:nth-child(2){
   width:200px;
   height:25px;
   padding: 2px;
   text-align: center;
   font-size: 14px;
}
#left{
	position: absolute;
	width:300px;
	top:150px;
	left:30px;
	z-index:1;
}

#right{
	position: absolute;
	width:300px;
	top:150px;
	right:0px;
	z-index:1;
}
.sub-title{
	color:#fff;
	margin-left: -15px;
	margin-top: 20px;
	padding-left: 16px;
	margin-bottom: 10px;
	background: url() 6px 10px no-repeat;
}
#circleBar,#circleBar2{
   display: inline-block;
   margin:8px;
}
#climate{
	position:absolute;
	top:20px;
	right:20px;
	z-index: 2;
}
#mask1{
	position:absolute;
	height:100%;
	width:400px;
	left:0;
	background:-webkit-linear-gradient(left,rgba(25,27,32,1),rgba(25,27,32,0)); 
	z-index: 1;
}
#mask2{
	position:absolute;
	height:100%;
	width:400px;
	right:0;
	background:-webkit-linear-gradient(left,rgba(25,27,32,0),rgba(25,27,32,1)); 
	z-index: 1;
}
